<template>
  <div class="footer">
    <div class="tabs">
      <div
        class="tab-item"
        v-for="(item, index) of tabs"
        :key="index"
        @click="tabItemClick(index, item)"
      >
        <div class="item-wrapper" :class="{'animate__pulse': activeIndex === index}">
          <div class="img-wrapper">
            <img :src="activeIndex === index ? item.active : item.inActive" alt />
          </div>
          <div class="theme-title" :class="{'active': activeIndex === index}">{{item.tabName}}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      activeIndex: 0,
      tabs: [
        {
          tabName: '首页',
          active: require('@/assets/images/2-D.png'),
          inActive: require('@/assets/images/1-D.png'),
          path: '/home'
        },
        {
          tabName: '设计师',
          active: require('@/assets/images/2-sjs.png'),
          inActive: require('@/assets/images/1-sjs.png'),
          path: '/designer'
        },
        {
          tabName: '品牌',
          active: require('@/assets/images/2-s.png'),
          inActive: require('@/assets/images/1-s.png'),
          path: '/brand'
        },
        {
          tabName: '我的',
          active: require('@/assets/images/2-c.png'),
          inActive: require('@/assets/images/1-c.png'),
          path: '/my'
        }
      ]
    }
  },
  watch: {
    $route (newVal) {
      switch (newVal.path) {
        case '/home':
          this.activeIndex = 0
          break
        case '/designer':
          this.activeIndex = 1
          break
        case '/brand':
          this.activeIndex = 2
          break
        case '/my':
          this.activeIndex = 3
      }
    }
  },
  created () {
    switch (this.$route.path) {
      case '/home':
        this.activeIndex = 0
        break
      case '/designer':
        this.activeIndex = 1
        break
      case '/brand':
        this.activeIndex = 2
        break
      case '/my':
        this.activeIndex = 3
    }
  },
  methods: {
    tabItemClick (index, item) {
      //
      this.activeIndex = index
      if (this.$route.path === item.path) return
      this.$router.push({ path: item.path })
    }
  }
}
</script>
<style lang="scss" scoped>
.footer {
  width: 100%;
  height: 1.22rem;
  background: rgba(255, 255, 255, 1);

  box-sizing: border-box;
  position: fixed;
  left: 0;
  bottom: 0;
  box-shadow: 5px 4px 36px -16px #999;
  z-index: 1;
  .tabs {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;

    box-sizing: border-box;
    .tab-item {
      width: 25%;
      height: 100%;
      .item-wrapper {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        height: 100%;
        padding: 0.3rem 0;
        box-sizing: border-box;
      }
      .img-wrapper {
        width: 0.25rem;
        height: 0.25rem;
        img {
          width: 100%;
          vertical-align: top;
        }
      }
      .theme-title {
        font-size: 0.2rem;
        font-family: PingFang SC;
        font-weight: 400;
        color: #999999;
        line-height: 0.2rem;
        &.active {
          color: #040000;
        }
      }
    }
  }
}
.animate__pulse {
  -webkit-animation-name: pulse;
  animation-name: pulse;
  animation-duration: 0.3s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
}
@-webkit-keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
@keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
</style>
